<template>
  <!-- 主煤流运行监测 -->
  <HerinContainer class="MainCoal-box" :delay="1" direction="Left" title="运输能耗分析">
    <!-- 内容区 -->
    <div slot="content" class="MainCoal-box-content">
      <div class="bottom-top">
        <div class="box-item">
          <div class="left">
            <img src="@/assets/img/coalflow/left-seting-1.png" alt="">
          </div>
          <div class="right">
            <span class="title">累计运输用电</span>
            <span class="num num1">985</span><span class="cam">万度</span>
          </div>
        </div>
        <div class="box-item">
          <div class="left">
            <img src="@/assets/img/coalflow/left-seting-2.png" alt="">
          </div>
          <div class="right">
            <span class="title">平均运输用电</span>
            <span class="num num2">3.05</span><span class="cam">度/吨</span>
          </div>
        </div>
      </div>
      <mould-box
        :datas="chartTimeData"
        class="mouldbox"
        chartTitle="近30天用电量"
        :chartOption="chartOption"
        :text="['近30天用电量']"
        height="9.625rem"
      />
    </div>
  </HerinContainer>
</template>

<script>
import HerinContainer from '@/components/HerinContainer';
import MouldBox from '../common/MouldBox.vue';
export default {

  components: {
    HerinContainer,
    MouldBox
  },
  data() {
    return {
      // 模板使用渲染参数
      MainCoalData: [],
      chartOption: {
        color: ['#F19323'],
        area: true,
        unit: '万度'
      },
      chartTimeData: [
        { x: '12-01', y: 75, s: '近30天用电量' },
        { x: '12-06', y: 30, s: '近30天用电量' },
        { x: '12-11', y: 60, s: '近30天用电量' },
        { x: '12-16', y: 37, s: '近30天用电量' },
        { x: '12-21', y: 79, s: '近30天用电量' },
        { x: '12-26', y: 42, s: '近30天用电量' },
        { x: '12-31', y: 67, s: '近30天用电量' }
      ]
    };
  },
  // 初始赋值
  mounted() {
  },
  methods: {
  }
};
</script>

<style lang='scss' scoped>
.MainCoal-box{
  &-tab{
      display: flex;
      .btn{
        @include btn
    }
    .isbtn{
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
  &-content{
    .bottom-top{
      display: flex;
      justify-content: space-between;
      margin-bottom: 1rem;
      .box-item{
        width: 9.6875rem;
        height: 3.125rem;
        border-radius: 4px;
        background-color: #1E2E46;
        display: flex;
        align-items: center;
        .left{
          width: 3.125rem;
          height: 3.125rem;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #334155;
          img{
            width: .9375rem;
            height: .9375rem;
            vertical-align:middle;
          }
        }
        .right{
          flex: 1;
          text-align: center;
          .title{
            color: #D9D9D9;
            font-size: .75rem;
            display: block;
          }
          .num{
            font-size: 1rem;
          }
          .num1{
            color:#FBB654 ;
          }
          .num2{
            color:#FB7155 ;
          }
          .cam{
            font-size: .75rem;
            color: #8D8D8D;
          }
        }
      }
    }
  }
}
</style>
